<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useDialogStore } from '@/stores/dialog'
import MyModule from '@/components/PermissionsModule/Performance/Group/MyModuleAllLeft.vue'
import GroupModule from '@/components/PermissionsModule/Performance/Group/GroupModuleAllLeft.vue'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const groupBoxRef = ref(null)
let timer = null
// 开始计时
const startTimer = () => {
  timer = setInterval(() => {
    groupBoxRef?.value?.hidden('l-box')
  }, 30000)
}
// 重置计时
const resetTimer = () => {
  clearTimeout(timer)
  if (!dialogInfo.visible) {
    startTimer()
  }
}
// 监听用户操作事件，重置计时
window.addEventListener('mousemove', resetTimer)
window.addEventListener('keydown', resetTimer)
window.addEventListener('click', resetTimer)
onMounted(() => {
  startTimer()
})
</script>
<template>
  <GroupBox
    pName="l-box"
    transition="left"
    ref="groupBoxRef"
    :title="$t('bi_finance_memberoverview')"
  >
    <template #title> {{ $t('bi_finance_memberoverview') }}</template>
    <template #first>
      <MyModule />
    </template>
    <template #second>
      <MyModule :showRemainingComponents="true" />
    </template>
  </GroupBox>
  <GroupBox
    pName="l-box"
    transition="left"
    :showMore="false"
    :title="$t('bi_finance_dealeroverview')"
  >
    <template #title> {{ $t('bi_finance_dealeroverview') }} </template>
    <template #first>
      <GroupModule :showRemainingComponents="true" />
    </template>
    <template #second>
      <GroupModule />
    </template>
  </GroupBox>
</template>

<style lang="scss" scoped></style>
